
<template>
<div  style="">
  <div class="row topic ">
      <div class="topic-left">
          <div style="display:inline-block; vertical-align: bottom">
              <img class="" :src='brand_img'/>
          </div>
          <div class="" style="display:inline-block;font-size:52px; line-height:62px; vertical-align: bottom">
              中心管理系统
          </div>
      </div>

      <div class="topic-right">
        <div  style="display:inline-block;">
            <svg id="alarmLogs" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" @click="showAlarmLogs( $event )">
                <path class="cls-1" d="M390.17,304.26H41l69.53-48.68a9.84,9.84,0,0,0,4.19-8.05V121.92a85.25,85.25,0,1,1,170.5,0V247.52a9.83,9.83,0,0,0,19.67,0V121.92A105,105,0,0,0,209.84,17.5V9.83a9.83,9.83,0,0,0-19.67,0V17.5A105,105,0,0,0,95.09,121.92V242.39L4.19,306a9.84,9.84,0,0,0,5.64,17.9H390.17a9.84,9.84,0,0,0,0-19.68Z" transform="translate(0)"/>
                <path class="cls-1" d="M248.09,332.23a9.84,9.84,0,0,0-9.83,9.85,38.25,38.25,0,1,1-76.51,0,9.84,9.84,0,1,0-19.68,0,57.93,57.93,0,0,0,115.85,0A9.84,9.84,0,0,0,248.09,332.23Z" transform="translate(0)"/>
            </svg>

            <div v-if="alarmShow" class="alarmLogs"  >
                <div class="upArrow" ></div>
                <div class="log-head">
                    <h4 style="display:inline-block ; width: 80%; margin:0px; padding: 10px; vertical-align:bottom" >实时报警消息</h4>
                    <span @click="showAlarmFilter" class="glyphicon glyphicon-filter" style="display:inline-block; width: 20%; vertical-align: text-bottom; font-size:1.5em; width:30px;height:30px;"> </span>
                </div>
                <div class="log-body"   :style= "{ 'max-height': (pageHeight - 220) + 'px', overflow: 'auto' }">
                    <div v-for="( alarm,k) in filtedAlarmLogs" class="alarm-item" >
                        <div>{{shops[alarm.shopid].name}}</div>
                        <div> <span class="log-tag">时间:</span> <span class="log-info" >{{ (new Date( Number( alarm.stamp)) ).toLocaleString() }} </span> </div>
                        <div> <span class="log-tag">报警防区: </span> <span class= "log-info" >{{ alarm.arm_area_idx }} </span></div>
                        <div v-if="alarm.process_result" >  alarm.process_result </div>
                        <div v-else @click.stop.prevent= "checkAlarmAreaVideo( alarm  )" class="clearfix " > <span class="col-sm-6 " >查看监控</span> <span class="glyphicon glyphicon-warning-sign glyphicon-warning  col-sm-6 "></span></div>
                    </div>
                </div>
            </div>
            <div class="alarmFilter" v-if="alarmShow && alarmFilterShow" >
                <div style="width:200px; padding:20px 30px;">
                    <label>最近 <input type="number"  style="width: 3em" @change="pullAlarmLogs" v-model="alarmFilter_time"></input> 小时之内</label>
                </div>
                <div>
                    <ul>
                        <li v-for="( v, k ) in alarmFilter_areas" >
                            <label>
                                <input type="checkbox" style="transform:scale(1.5)" v-model="alarmFilter_areas[k]"> </input> {{areas[k].name}} 
                            </label>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div @click="config()" style="display:inline-block; ">
            <svg id="configLink" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 399.99">
                <path class="cls-1" d="M200,269.22A69.23,69.23,0,1,1,269.24,200a9.89,9.89,0,0,1-19.79,0A49.45,49.45,0,1,0,200,249.45a9.89,9.89,0,0,1,0,19.77Z"/>
                <path class="cls-1" d="M200,400c-14.79,0-23-1.34-23.29-1.39-14.16-2.37-29-14.82-33.82-28.34l-3.24-9.11a7.78,7.78,0,0,0-10.93-4.53l-8.7,4.14a39.82,39.82,0,0,1-17,3.56c-10.12,0-19.85-3.17-26.74-8.7-.28-.23-.54-.46-.79-.71L45.07,324.49c-.24-.25-.48-.51-.71-.79C35.23,312.34,33,293.14,39.23,280l4.13-8.7a7.65,7.65,0,0,0-4.53-10.93l-9.09-3.23c-13.52-4.81-26-19.67-28.34-33.82C1.34,222.95,0,214.79,0,200s1.34-23,1.4-23.3c2.36-14.16,14.82-29,28.34-33.82l9.11-3.24a7.66,7.66,0,0,0,4.52-10.92L39.22,120c-6.25-13.15-4-32.36,5.13-43.72.23-.28.47-.55.71-.8L75.5,45.07c.25-.25.51-.48.79-.71,6.88-5.53,16.62-8.7,26.74-8.7a39.81,39.81,0,0,1,17,3.57l8.7,4.14a7.76,7.76,0,0,0,10.94-4.53l3.23-9.09c4.82-13.53,19.67-26,33.83-28.35C177,1.33,185.21,0,200,0s23,1.33,23.3,1.39c14.15,2.36,29,14.82,33.82,28.34l3.23,9.11a7.76,7.76,0,0,0,10.93,4.52l8.7-4.14a39.81,39.81,0,0,1,17-3.57c10.12,0,19.86,3.17,26.74,8.7.28.23.54.46.79.71L354.93,75.5a10.29,10.29,0,0,1,.71.8c9.13,11.35,11.38,30.56,5.12,43.72l-4.13,8.7a7.65,7.65,0,0,0,4.53,10.93l9.09,3.23c13.53,4.82,26,19.67,28.35,33.83.05.34,1.39,8.5,1.39,23.3s-1.34,23-1.39,23.3c-2.37,14.15-14.82,29-28.34,33.82l-9.11,3.23a7.66,7.66,0,0,0-4.53,10.93l4.14,8.7c6.25,13.16,4,32.36-5.13,43.72-.23.28-.46.54-.71.79L324.5,354.92c-.25.25-.51.48-.79.71-6.88,5.53-16.62,8.7-26.74,8.7h0a39.71,39.71,0,0,1-17-3.57l-8.7-4.13a7.77,7.77,0,0,0-10.93,4.53l-3.23,9.09c-4.81,13.53-19.67,26-33.82,28.35C222.95,398.65,214.79,400,200,400Zm-67.58-64a27.31,27.31,0,0,1,25.86,18.55l3.24,9.11c2.44,6.88,11.24,14.25,18.45,15.46a141.13,141.13,0,0,0,20,1.12,142.2,142.2,0,0,0,20.06-1.12c7.19-1.21,16-8.58,18.43-15.46l3.23-9.09A27.32,27.32,0,0,1,267.58,336a28.24,28.24,0,0,1,12.2,2.79l8.7,4.14c6,2.84,17.09,1.63,22.47-2.4l29.57-29.57c4.22-5.64,5.37-16.19,2.4-22.47l-4.14-8.7a27.43,27.43,0,0,1,15.76-38.06l9.11-3.24c6.88-2.44,14.25-11.24,15.46-18.45a141.16,141.16,0,0,0,1.12-20,142.18,142.18,0,0,0-1.12-20.06c-1.21-7.19-8.58-16-15.46-18.43l-9.09-3.23a27.43,27.43,0,0,1-15.77-38.06l4.14-8.69c3-6.28,1.82-16.83-2.4-22.47L310.95,59.49c-5.39-4-16.51-5.23-22.47-2.4l-8.7,4.14A28.22,28.22,0,0,1,267.58,64a27.32,27.32,0,0,1-25.86-18.55l-3.24-9.11C236,29.48,227.24,22.11,220,20.9a142,142,0,0,0-20-1.12,141.12,141.12,0,0,0-20.06,1.12c-7.18,1.21-16,8.57-18.43,15.46l-3.23,9.09A27.32,27.32,0,0,1,132.42,64a28.15,28.15,0,0,1-12.2-2.8l-8.7-4.13c-6-2.84-17.08-1.63-22.47,2.4L59.5,89c-4.22,5.64-5.38,16.2-2.4,22.47l4.14,8.7a27.43,27.43,0,0,1-15.76,38.06l-9.11,3.23C29.49,164,22.12,172.75,20.91,180a141.88,141.88,0,0,0-1.12,20,143.17,143.17,0,0,0,1.12,20.06c1.21,7.18,8.58,16,15.46,18.43l9.09,3.23a27.42,27.42,0,0,1,15.77,38.07l-4.13,8.69c-3,6.28-1.82,16.84,2.4,22.47L89.05,340.5c5.4,4,16.52,5.23,22.47,2.4l8.7-4.14A28.21,28.21,0,0,1,132.42,336Z"/>
            </svg>
        </div>
      </div>

      <ul class="nav nav-pills topic-middle">
        <router-link active-class="active" to="/baiduMap" tag="li"><a>地图</a>  </router-link> 
        <router-link active-class="active" to="/protectors" tag="li"><a>门店</a>  </router-link>  
        <router-link active-class="active" to="/log" tag="li"><a>日志</a></router-link>
      </ul>
  </div>
  <router-view />
  <!--iframe width="1200" height="600" ref="videoFrame" id="popupVideo" :style="{ 'position':'fixed', 'display': areaVideoShow ? 'block': 'none', 'z-index':  areaVideoShow? '1000': '-1000' }" src="./video.html" >  </iframe-->
  <Area id="popupVideo" v-if="areaVideoShow"  :shop="videoParams.shop" :protector="videoParams.protector" :channels="videoParams.channels" :stamp="videoParams.stamp" 
    :arm-area-idx="videoParams.arm_area_idx" />
</div>
</template>

<style scoped>
.cls-1{
    fill: red;
}
.topic{
    margin:0px;
    width: 100%;
    height:100px;
    padding-top:19px;
    padding-bottom: 19px;
}
.topic-left{
    margin-right:0px;
    float: left;
    width: 600px;
}
.topic-left:after{
    clear: both;
}
.topic-right:after{
    clear: both;
}
.topic-middle{
    margin-left:600px;
    margin-right: 400px;
}
.topic-right{
    float:right;
    width: 400px;
    position: relative;
    text-align:left;
}
.topic-right>div{
    display: inline-block;
    width: 40px;
    height: 40px;
    margin:20px;
}

.nav-pills > li{
    font-weight: bold;
    border-radius: 15px;
    height:30px;
    width: 100px;
    text-align: center;
    line-height: 30px;
    font-size: 18px;
    margin:0px 30px;

}

.nav-pills li:nth-of-type(4),.nav-pills li:nth-of-type(5){
    width: 40px;
    float: right;
    cursor: pointer;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    color: #fff;
    background-color: rgb(75,137,220);
}

.nav-pills > li > a {
    border-radius: 15px;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.alarmFilter{
    position: absolute;
    top: 100px;
    right: 520px;
    z-index:1000;
    background-color:white;

}

.alarmLogs{
    text-align:center;
    border-radius: 15px;
    z-index: 1000;
    display:block;
    position:absolute;
    left: -110px;
    top:80px;
    width: 300px;
}

.alarmLogs .upArrow{
    display:inline-block;
    width: 0px;
    height: 0px;
    border-left: 30px solid transparent ;
    border-right:30px solid transparent;
    border-bottom:30px solid black;
}
.alarmLogs .log-body,
.alarmLogs .log-head {
    background-color: white;
}
.alarm-item{ 
    padding-top: 5px solid white;
    border: 2px solid #ddaa88;
}
.alarm-item div{
    border-top: 1px solid black;
    padding: 5px;
}
.log-tag{
    margin-right: -.25em;
    display: inline-block;
    text-align: left;
    width: 25%;
}
.log-info{
    margin-right: -.25em;
    display: inline-block;
    text-align: center;
    width: 75%;
}
.glyphicon-warning{
    color: red;
}

#popupVideo{
    width: 1200px;
    max-height: 600px;
    position: fixed;
    z-index: 1000;
    padding: 20px;
    top: 20%;
    left: 20%;
    background-color: #aaaaaa;
}

</style>
<script>
import brand_img from './assets/brand.png'
import bus from './bus'
import Area from './area'

export default {
    name: 'shops',
    data(){ 
        return { 
            videoParams: null,
            alarmShow: false,
            alarmFilterShow: false,
            alarmFilter_time: 12,
            alarmFilter_areas:{},
            areaVideoShow: false
        }
    },
    components: {
        Area,
    },
    mounted(){
        var vm = this;
        bus.$on( "CloseArmArea", ( data )=> { 
            vm.areaVideoShow = false;
        });
        bus.$on( "ShowArmArea", ( data )=> { 
            console.log( "get ShowArmArea message ")
            vm.areaVideoShow = true;

            var shop = vm.$store.state.shops[data.shopid];
            var arm_area_idx = data.arm_area_idx;
            var channels = [];
            console.log( "current cameras",   shop.cameras);
            if( 0 ){
                for( let channel in shop.cameras ) { 
                    if( shop.cameras[channel] == arm_area_idx ) { 
                        channels.push( channel );
                    }
                }
            }
            else {
                channels = Object.keys( shop.cameras );
            }
            var protector = vm.$store.state.protectors[shop.mac];
            this.videoParams = (  { shop, protector, arm_area_idx, channels, stamp: 0 } );
        })
        for( let id in this.$store.state.areas ){
            this.$set( this.alarmFilter_areas, id,  true );
        }
    },
    computed: { 
        filtedAlarmLogs(){
            var filted = [];
            for( let i = 0; i < this.$store.state.alarmLogs.length; i++ ) { 
                var alarm = this.$store.state.alarmLogs[i];
                var areaid = this.shops[alarm.shopid].areaid;
                if( this.alarmFilter_areas[areaid]){
                    filted.push( alarm ) ;
                }
            }
            console.log( filted )
            return filted;
        },
        alarmLogs(){ 
            return this.$store.state.alarmLogs;
        },
        brand_img (){
            return brand_img;
        },
        shops() {
            return this.$store.state.shops;
        },
        protectors(){
            return this.$store.state.protectors;
        },
        pageHeight(){ 
            return window.innerHeight;
        },
        areas(){
            return this.$store.state.areas;
        }
    },
    methods: {
        pullAlarmLogs(){
            console.log( 'pull alarm logs ');
            this.$store.dispatch( "pullAlarmLogs", { start: this.alarmFilter_time  } );
        },
        clickCapture() { 
            //this.$data.alarmShow = !this.$data.alarmShow;
            //this.$data.areaVideoShow = !this.$data.areaVideoShow; 
            console.log( " click capture ")
        },

        showAlarmFilter( event ) {
            console.log( "--");
            this.alarmFilterShow = !this.alarmFilterShow;
        },

        showAlarmLogs( event ) { 
            console.log( event )
            this.$data.alarmShow = !this.$data.alarmShow;
        },

        config(){
            window.location.href="configdev.html";
        },
        checkAlarmAreaVideo( alarm ){
            console.log( "checkAlarmAreaVideo: ", alarm )
            var stamp = alarm.stamp ;
            var shopid = alarm.shopid;
            var arm_area_idx = alarm.arm_area_idx;
            this.$data.areaVideoShow = !this.$data.areaVideoShow;
            var shop = this.$store.state.shops[shopid];
            var protector = this.$store.state.protectors[shop.mac];

            var channels = [];
            if( 0 ){
                //workaround to test 
                console.log( "current cameras",   shop.cameras);
                for( let channel in shop.cameras ) { 
                    if( shop.cameras[channel] == arm_area_idx ) { 
                        channels.push( channel );
                    }
                }
            }
            else {
                console.log( shop.cameras );
                channels = Object.keys( shop.cameras );
            }

            console.log( channels );

            var video = { shop, protector, arm_area_idx, channels, stamp, is_alarm: true  }; 
            this.videoParams = video;
        },
    }
}
</script>
